
<template>
  <div>
    <Card title="部门账号" ref="card">
      <a href="#" slot="extra" @click.prevent="refData">刷新</a>
      <Button size="large" type="primary" icon="ios-add" v-on:click="AddEmployee">新增人员</Button>
    </Card>
    <Modal :mask-closable="false" v-model="modal2" width="500">
      <p slot="header" class="color-primary text-align-center">
        <Icon type="ios-information-circle"></Icon>
        <span>{{typeName}}</span>
      </p>

      <Form :model="formItem" :label-width="80">
        <FormItem label="姓名">
          <Input v-model="employeeTemp.EmployeeName" size="large" placeholder="姓名" />
        </FormItem>
        <FormItem label="登录账号">
          <Input v-model="employeeTemp.Account" size="large" placeholder="登录账号" />
        </FormItem>
        <FormItem label="手机号">
          <Input v-model="employeeTemp.EmployeePhone" size="large" placeholder="手机号" />
        </FormItem>
        <FormItem label="地区">
          <Select
            filterable
            label-in-value
            v-model="employeeTemp.AreaId"
            size="large"
            placeholder="请选择地区"
          >
            <Option v-for="item in areaList" :value="item.Gid" :key="item.Gid">{{ item.AreaName }}</Option>
          </Select>
        </FormItem>
      </Form>

      <div slot="footer">
        <Button type="primary" size="large" @click="SaveEmployee">保存</Button>
      </div>
    </Modal>

    <Table
      class="margin-top-10"
      border
      :columns="tableTitle"
      :data="tableData"
      ref="table"
      :height="tableHeight"
    ></Table>
  </div>
</template>
<script>
import { Message, Modal } from "view-design";
import { getToken, baseUrl } from "@/libs/util";
import {
  SearchArea,
  SearchAreaEmployee,
  SaveEmployee,
  ResetEmployeePwd,
  DeleteEmployee
} from "@/api/data";
export default {
  name: "area_employee_manager",
  data() {
    return {
      tableHeight: 450,
      modal2: false,
      tableTitle: [
        {
          title: "操作",
          key: "action",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.typeName = "修改人员";
                      this.employeeTemp = params.row;
                      this.modal2 = true;
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "success",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.ResetEmployeePwd(params.row.Gid);
                    }
                  }
                },
                "重置密码"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.DeleteEmployee(params.row.Gid);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        },
        {
          title: "姓名",
          key: "EmployeeName"
        },
        {
          title: "手机号",
          key: "EmployeePhone"
        },
        {
          title: "登录账号",
          key: "Account"
        },
        {
          title: "地区",
          render: (h, params) => {
            if (params.row.AreaInfo != null) {
              return h("div", params.row.AreaInfo.AreaName);
            }
          }
        }
      ],
      tableData: [],
      areaList: [],
      areaTmp: "",
      typeName: "新增人员",
      employeeTemp: {
        Gid: "",
        AreaId: "",
        Account: "",
        Auth: 4,
        EmployeeName: "",
        EmployeePhone: "",
        EmployeeAvator: "",
        Type: 1,
        IsDelete: 0
      }
    };
  },
  methods: {
    clearEmployee() {
      this.signImgs = [];
      this.typeName = "新增人员";
      this.employeeTemp = {
        Gid: "",
        Account: "",
        AreaId: "",
        Auth: 4,
        EmployeeName: "",
        EmployeePhone: "",
        EmployeeAvator: "",
        Type: 1,
        IsDelete: 0
      };
    },
    AddEmployee() {
      this.clearEmployee();
      this.modal2 = true;
    },
    ResetEmployeePwd(id) {
      ResetEmployeePwd(id).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          this.$Modal.success({ title: "提示", content: "密码重置为'654321'" });
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    refData() {
      this.SearchArea();
      this.SearchAreaEmployee();
    },
    SearchArea() {
      let vm = this;
      SearchArea().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.areaList = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SearchAreaEmployee() {
      let vm = this;
      SearchAreaEmployee().then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.tableData = data.Data;
        } else {
          Message.error(data.Message);
        }
      });
    },
    SaveEmployee() {
      let vm = this;
      if (!this.employeeTemp.Account) {
        Message.error("登录账号不能为空");
        return;
      }
      if (!this.employeeTemp.AreaId) {
        Message.error("地区不能为空");
        return;
      }
      this.employeeTemp.Auth = 4;

      SaveEmployee(this.employeeTemp).then(res => {
        const data = res.data;
        if (data.Type == 1) {
          vm.modal2 = false;
          vm.clearEmployee();
          vm.SearchAreaEmployee();
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    DeleteEmployee(id) {
      Modal.confirm({
        title: "提示",
        content: "确定要删除此人员吗？",
        onOk: () => {
          DeleteEmployee(id).then(res => {
            const data = res.data;
            if (data.Type == 1) {
              this.SearchAreaEmployee();
              this.$Modal.success({ title: "提示", content: "删除成功" });
            } else {
              this.$Modal.error({ title: "提示", content: data.Message });
            }
          });
        },
        onCancel: () => {}
      });
    }
  },
  created() {},
  mounted() {
    var cardHeight = this.$refs.card.$el.offsetHeight;
    this.tableHeight = window.innerHeight - cardHeight - 160;
    this.SearchArea();
    this.SearchAreaEmployee();
  }
};
</script>
